<template>
	<div class="home">
		<van-swipe :autoplay="3000" lazy-render>
			<van-swipe-item>
				<img style="width: 100%;" :src="require('@/assets/images/ggl.jpg')" />
			</van-swipe-item>
		</van-swipe>
		
		<van-cell-group title="随机金额">
			<van-cell center title="是否开启">
				<template #right-icon>
					<van-switch v-model="isPay" size="24" />
				</template>
				<template #label>
					说明：先支付金额，才能拿去该礼物。
				</template>
			</van-cell>
			<van-field v-model="payAmount" v-show="isPay" maxlength="5" type="digit" label="最大金额" />
		</van-cell-group>
		
		<van-cell-group title="人物列表" >
			<van-cell :title="item.name" class="van-cell" v-for="(item,key) in userList" :key="key">
				<template #extra>
					<van-button type="default" :size="size" @click="onEdit(item,key)" >编辑</van-button>
					<van-button type="danger" :size="size" @click="onDel(item,key)" >删除</van-button>
				</template>
				<template #label>
					<div>编号 : {{ item.num }} </div>
				</template>
			</van-cell>
		</van-cell-group>
		
		<van-action-bar>
			<van-action-bar-button color="#be99ff" type="warning" @click="onAdd" text="新增人员" />
			<van-action-bar-button color="#7232dd" type="danger" @click="onRandom" text="随机生成" />
		</van-action-bar>
		
		
		<!-- 编辑弹窗 -->
		<van-popup v-model:show="show" round position="bottom" @close="onClose">
			<home-form @onSubmit="onSubmit" :selectUser="selectUser"></home-form>
		</van-popup>
	</div>
</template>

<script>
	// tap(点击) /press(按) /pan(拖拽) /swipe(划) /pinch(捏合) /rotate(旋转) 
	import Hammer from 'hammerjs';
	import { useStore } from "vuex";
	import { Dialog, Toast } from 'vant';
	import { debounce,throttle } from 'lodash';
	import HomeForm from './components/Form.vue';
	import { useRoute, useRouter } from 'vue-router';
	import { reactive, onMounted, computed, toRefs, ref, watch, onBeforeUnmount } from 'vue';

	export default {
		name: "Home",
		components: {
			HomeForm
		},
		props:{},
		setup (props, { emit }) {
			const store = useStore();
			const route = useRoute();
			const router = useRouter();
			let manager = null;
			
			const state = reactive({
				show: false, // 弹窗标识
				size: 'mini', // 大小
				isPay: false, // 是否开启支付金额
				payAmount: 10,
				userList: [
					{ name: '欧敏聪', num: 1 },
					{ name: '梁颖颜', num: 2 },
					{ name: '黄浩翔', num: 3 },
					{ name: '陈洛瑶', num: 4 },
					{ name: '吴静宜', num: 5 },
					{ name: '苏德', num: 6 },
					{ name: '陈锦喜', num: 7 },
					{ name: '覃志毅', num: 8 },
					{ name: '冼俊朗', num: 9 },
					{ name: '吴怡靜', num: 10 },
					{ name: '叶丽珊', num: 11 },
					{ name: '梁敬文', num: 12 }
				],
				selectUser: { name: '', num: '' }
			})
			
			if(store.getters.userList.length){
				state.userList = store.getters.userList;
			}
			
			// 编辑
			const onEdit = (item,key) =>{
				state.selectUser.name = item.name;
				state.selectUser.num = item.num;
				state.selectUser.key = key;
				state.show = true;
			}
			
			// 删除
			const onDel = (item,key) =>{
				Dialog.confirm({ title: '删除', message: `确定删除 ${ item.name }?` })
				.then(() => {
					state.userList.splice(key,1);
				}).catch(()=>{});
			}
			
			// 修改
			const onSubmit = (values) =>{
				if(state.selectUser.key){
					state.userList[state.selectUser.key].name = values.name;
					state.userList[state.selectUser.key].num = values.num;
				}else{
					
					for (let i=0;i<state.userList.length;i++){
						if(state.userList[i].name == values.name){
							return Toast(`名称 : ${values.name} 已存在！`);
						}else if(state.userList[i].num == values.num){
							return Toast(`编号 : ${values.num} 已存在！`);
						}
					}
					
					state.userList.push({ name: values.name, num: values.num });
				}
				state.show = false;
				onClose();
			}
			
			// 弹窗关闭
			const onClose = () =>{
				state.selectUser = { name: '', num: '' };
			}
			
			// 新增人员
			const onAdd = () =>{
				state.show = true;
			}
			
			// 随机生成
			const onRandom = () =>{
				let rules = {
					isPay: state.isPay, 
					userList: state.userList, 
					payAmount: state.payAmount, 
				};
				store.dispatch("setRules", JSON.parse(JSON.stringify(rules)));
				store.dispatch("setTransition", 'slide-right').then(res=>{
					router.push({ path: "/about" });
				});
			}
			
			// 节点加载完毕
			onMounted(()=>{
				var swiper = document.querySelector('.home');
				// Create a manager to manager the element
				manager = new Hammer.Manager(swiper,{});
				// 注册事件
				manager.add(new Hammer.Swipe({ direction: Hammer.DIRECTION_HORIZONTAL }));
				manager.on('swipe', function(e) {
					e.preventDefault();
					var direction = e.offsetDirection; // 2:LEFT,4:RIGHT,8:UP,16:DOWN
					if (direction === 4) {
						// console.log(e.deltaX,'向右滑');
					}else if(direction === 2){
						// console.log(e.deltaX,'向左滑');
						let rules = {
							isPay: state.isPay, 
							userList: state.userList, 
							payAmount: state.payAmount, 
						};
						store.dispatch("setRules", JSON.parse(JSON.stringify(rules)));
						store.dispatch("setTransition", 'slide-left').then(res=>{
							router.push({ path: "/about" });
						});
					}
				});
			})
			
			onBeforeUnmount(()=>{
				if(manager){
					manager.destroy();
				}
			})
			
			return {
				...toRefs(state),
				onEdit,
				onDel,
				onAdd,
				onRandom,
				onSubmit,
				onClose
			}
		}
	};
</script>

<style lang="scss" scoped="scoped">
	.home{
		padding-bottom: 60px;
	}
</style>